<template>
  <div class="compile">
    <!-- 反馈主题 -->
    <div class="compile-title">
      <el-input
        class="input-title"
        v-model="title"
        placeholder="请输入标题"
        :disabled="disableInput"
      />
      <!-- <div class="compile-fullscreen" title="全屏预览">
        <el-icon class="el-icon-rank"></el-icon>
      </div> -->
    </div>
    <!-- 反馈主题 -->
    <v-md-editor
      v-model="value"
      :mode="mode"
      :height="mode === 'preview' ? 'auto' : '600px'"
      @save="onTapSave"
      :disabled-menus="[]"
      @upload-image="handleUploadImage"
    />
    <el-button type="primary" class="submit-btn" v-if="mode !== 'preview'"
      >发布</el-button
    >
  </div>
</template>

<script>
import storage from '@/utils/storage'
let fromPage = ''

export default {
  name: 'Compile',
  data() {
    return {
      fromPage: '', // 从哪个页面跳过来的，可选值：Documnet | Opinion
      title: '',
      itemForm: {},
      action: '', // check|edit|create
      // 编辑器部分
      value: '',
      mode: 'edit'
    }
  },
  computed: {
    disableInput() {
      return this.action === 'check'
    }
  },
  methods: {
    // 初始化信息
    initDate(action) {
      if (action === 'create') { // 创建信息
        this.action = 'create'
      } else {
        let rowInfo = storage.getItem('rowInfo')
        this.title = rowInfo.title
        this.value = rowInfo.value
        if (rowInfo.action === 'edit') { // 编辑信息
          this.mode = 'editable'
        } else { // 查看信息
          this.mode = 'preview'
        }
      }
    },
    // 保存文件
    onTapSave(text, html) {
      // console.log(this.value)
      // console.log(text, html)
      let text1 = JSON.stringify(text)
      console.log(text1)
    },
    // 上传本地图片
    handleUploadImage(event, insertImage, files) {
      console.log(files)

      // 拿到服务端的图片地址之后插入图片
      insertImage({
        url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892,3525182336&fm=26&gp=0.jpg',
        desc: '七龙珠',
        // width: 'auto',
        // height: 'auto',
      })
    }
  },
  // 组件内部路由守卫
  beforeRouteEnter(to, from) {
    if (!from.name) {
      fromPage = storage.getItem('fromPage')
    } else {
      fromPage = from.name
      storage.setItem('fromPage', fromPage)
    }
  },
  beforeRouteLeave(to, from) {
    storage.clearItem('rowInfo')
  },
  mounted() {
    let action = this.$route.params.id
    this.fromPage = fromPage
    this.initDate(action)
  }
}
</script>

<style lang="scss">
.compile {
  padding-bottom: 20px;
  box-sizing: border-box;
  .compile-title {
    position: relative;
    .input-title {
      input {
        border: none;
        height: 50px;
        font-size: 16px;
        color: #000;
        font-weight: 700;
        border-bottom: 1px solid #ddd;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
      }
    }
    .compile-fullscreen {
      position: absolute;
      right: 10px;
      top: 26%;
      transform: rotate(45deg);
      cursor: pointer;
      .el-icon {
        font-size: 24px;
      }
    }
  }
  .v-md-editor {
    border-top-left-radius: unset;
    border-top-right-radius: unset;
  }
  .submit-btn {
    width: 100%;
    height: 40px;
    border-radius: 30px;
    margin-top: 30px;
  }
}
</style>
